
<template>
    <div>
        <div class="collection-content">
            <collectTap :collecttype=collectTap></collectTap>
            <div class="tab-content">
                <div class="tab-content-in">
                    <div class="top-cont">
                        <div class="left-info">全部商品({{lis.length}}) <i class="icon"></i></div>
                        <div class="right-info">
                            <!--<a>一键清理</a>-->
                            <a class="a1" @click="managestatus= !managestatus">管理商品 <i class="icon"></i></a>
                        </div>
                    </div>
                    <div class="commodity-con" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="4">
                        <div class="same-box" v-for="item in lis" :key="item.collectionId" @click="checkitem(item)">
                            <i class="choose-iconsz " :class="{active: item.ischecked}" v-show="managestatus"></i>
                            <div class="zhe" v-show="managestatus"></div>
                            <div class="top-info">
                                <router-link :to="{name:'Commodity_details',query:{id:item.goodsId}}"><img :src=item.goodsThum alt="" class="img-info"></router-link>

                            </div>
                            <div class="bottom-info">
                                <h4 class="title">{{item.goodsName}}</h4>
                                <div class="price">
                                    <span>现价￥{{item.goodsScreenPrice |amountMin100}}</span>
                                    <span class="xiaoliang">月销 524</span>
                                    <span class="quanhou" v-if="item.couponList.length!==0">券后 <strong>￥{{item.goodsRealPrice-item.couponList[0].price | amountMin100}}</strong></span><!---->
                                    <span class="quanhou" v-else><strong></strong></span><!---->
                                    <span class="card-icon"></span>
                                </div>
                                <div class="shop-cart">
                                    <span class="zxs">找相似</span>
                                    <span class="in-shop"><i class="icon"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <loadingtmp :busy="busy" :datalength="lis.length" :loadall="loadall"></loadingtmp>
                </div>
            </div>
            <div class="choose-content" v-show="managestatus">
                <div class="bottom-choose">
                    <div class="left-c" @click="allcheck">
                        <i class="icon" :class="{active: allchkstatus}"></i>全选
                    </div>
                    <div class="right-del" @click="deletesomeitem">删除</div>
                </div>
                <div class="choose-mc"></div>
            </div>
        </div>
        <navFooter :pageName="pageName"></navFooter>
    </div>
</template>
<style scoped>
    @import "../../../assets/personal/css/collection.css";
    .top-info a img{
     height: 200px;
    }
</style>
<script>
    import navFooter from '@/components/footer'
    import collectTap from '@/components/personal/collect_tap'
    import loadingtmp from '@/components/load/loading'
    export default {
        data() {
            return {
                pageName: "collect",
                lis: [],
                managestatus: false,
                allchkstatus: false,
                dels: [],
                collectTap: 1,
                 page: 1,
                pageSize: 4,
                busy: false,////////////
                loadall: false,
            }
        },
        components: {
            navFooter,
            collectTap,
            loadingtmp
        },
        mounted() {

            //收藏
          
        },
        methods: {
            good_slist(flag){
                this.$http.get(this.APIURL_PREFIX + '/api/wap/collection/page',{params:{page:this.page,rows:this.pageSize,collectionType:1}}).then((response) => {
                     console.log(response.data)
                    //  var arr = response.data.data;
                    //  arr.forEach(item => {
                    //     item.ischecked = false;
                    //  })
                    //  this.lis = arr;
                    //  this.couponList = this.lis.couponList
                    if (flag) {
                        var arr=response.data.data
                        arr.forEach(item => {
                           item.ischecked = false;
                        })
                        this.lis = this.lis.concat(arr);
                        this.couponList = this.lis.couponList
                    } else {
                        var arr=response.data.data
                        arr.forEach(item => {
                           item.ischecked = false;
                        })
                        this.lis = arr
                    }
                    if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                        this.busy = true;
                        this.loadall = true;
                    }
                    else {
                        this.busy = false;
                        this.page++
                    }
                    }).catch(function (err) {
                     console.log(err)
                });
            },
             loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.good_slist(this.page > 1);
                }, 500);
            },
            checkitem(item) {
                item.ischecked = !item.ischecked;

                if (!item.ischecked && this.allchkstatus) { this.allchkstatus = false }
            },
            allcheck() {
                this.allchkstatus = !this.allchkstatus
                this.lis.forEach(item => {
                    item.ischecked = this.allchkstatus;
                });
            },
            deletesomeitem() {
                this.dels.length = 0; 
                if(confirm("确定删除吗？")){
                this.lis.forEach(item => {
                   item.ischecked && this.dels.push(item.collectionId);
                   layer.msg("删除成功")                
                });
                 this.$http.post(this.APIURL_PREFIX + '/api/wap/collection/delete', $.param({ id: this.dels.join(','), type: this.collectTap })).then((response) => {
                    if (0 == response.data.code) {
                        this.lis = this.lis.filter(function (item) { return !item.ischecked });
                    }
                    else {
                        layer.msg(response.data.msg);
                    }
                }).catch(function (err) {
                    console.log(err)
                });
             }  
            }
        },
        created: function () { //模板刚创建的时候

        },

    }

</script>

